<template>
    <div class="container mt-2">

        <el-card shadow="hover">
            <template #header>
                <h3>发布提问</h3>
            </template>
            <el-form size="large" ref="queForm" :rules="rules" :model="formData" label-position="top"
                label-width="auto">
                <el-form-item prop="title" label="标题">
                    <el-input v-model.trim="formData.title" placeholder="请输入问题标题"></el-input>
                </el-form-item>
                <el-form-item prop="cate_id" label="所属分类">
                    <el-select style="width: 200px;" v-model.trim="formData.cate_id" placeholder="请选择分类">
                        <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in categoryList" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="content" label="问题描述">
                    <div style="border: 1px solid #ddd;width: auto;">
                        <Toolbar style="border-bottom: 1px solid #ddd" :editor="editorRef"
                            :defaultConfig="toolbarConfig" :mode="mode" />
                        <Editor style="height: 302px; overflow-y: hidden;" v-model="formData.content"
                            :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                    </div>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="action-right">
                    <el-button :icon="Promotion" @click="submit" type="primary" plain>立即发布</el-button>
                </div>
            </template>
        </el-card>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import http from '@/utils/http'
import { getCategory } from '@/utils/api'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, shallowRef, ref, onMounted, useTemplateRef, ElMessage } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Promotion } from '@element-plus/icons-vue'
import { inject } from 'vue'
const queFormRef = useTemplateRef('queForm')
const router = useRouter()
const serverHost = inject('host')
let editorRef = shallowRef()
const mode = 'default'
const toolbarConfig = {}
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            fieldName: 'image',
            server: `${serverHost}/api/upload/wang_editor_upload/`
        }
    }
}
// 表单数据
const formData = ref({
    title: '',
    cate_id: '',
    content: ''
})
const rules = {
    title: [{ required: true, message: '请输入问题标题', trigger: 'blur' }],
    cate_id: [{ required: true, message: '请选择所属分类', trigger: 'blur' }],
    content: [{ required: true, message: '请输入问题描述', trigger: 'blur' }]
}
// 分类列表
const categoryList = ref([])
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
onMounted(async () => {
    const result = await getCategory()
    if (result.status === 200) {
        // 请求分类列表数据
        categoryList.value = result.data
    }

})
const submit = () => {
    queFormRef.value.validate(async valid => {
        if (valid) {
            const result = await http.post('/api/question/', formData.value)
            if (result.status == 201) {
                ElMessage.success('发布成功')
                router.push({ name: 'question', params: { id: result.data.id } })
            }
        }
    })

}
</script>
<style></style>